<template>
  <a-row type="flex" justify="center">
    <a-col
      :xs="24"
      :sm="24"
      :md="24"
      :lg="22"
      :xl="19"
     :style="
        GetIspc
          ? 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 0px'
          : 'box-shadow: 0 40px 80px 0 rgb(0 0 0 / 30%); margin-top: 40px'
      "
    >
      <a-layout id="components-layout-demo-top" class="layout">
        <a-back-top />
        <a-drawer
          title="过滤条件"
          :width="300"
           placement="left"
          :visible="is_drawer_visible"
          :body-style="{ paddingBottom: '80px' }"
          @close="onDrawerClose"
        >
          <div class="logo" />
          <!-- slider start  移动端 -->

          <sider-search :state="search_result"> </sider-search>
          <!-- slider end 移动端 -->
        </a-drawer>

        <a-layout-sider
          v-show="show_sider && !GetIspc"
          theme="light"
          width="25%"
          breakpoint="lg"
          collapsed-width="0"
          @collapse="onSearchSideCollapse"
          @breakpoint="onSearchSideBreakpoint"
        >
          <div class="logo" />
          <!-- slider start pc -->
          <sider-search :state="search_result"> </sider-search>
          <!-- slider end pc -->
        </a-layout-sider>

        <a-layout-content style="width: 72%; background: #fff;padding:20px;">
          <a-row>
            <a-affix v-show="!is_show_sider_bar" style="text-align:right">
              <a-button @click="affixChange">
                <a-icon type="menu-unfold"></a-icon>
              </a-button>
            </a-affix>
          </a-row>
          <a-card>
            <a-row>
              <a-divider dashed />
            </a-row>
            <a-row>
              <!-- 搜索  start -->
              
              <search-box ref="child" />
              <!-- 搜索  end -->
            </a-row>

            <a-row v-if="books !=''">
              <a-divider dashed />
            </a-row>
            <a-row>
              <slot name="book">
                <div
                  v-for="(item, index) in getfilters"
                  :key="index"
                  style="height: 50px; line-height: 50px; float: left"
                >
                  <a-tag
                    v-for="(items, indexs) in item.name"
                    :key="indexs"
                    closable
                    visible
                    @close="() => handleClose(item, indexs)"
                    style="padding: 5px; color: #ff5e0f"
                  >
                   {{item.lable}}: {{ items }}
                  </a-tag>
                </div>
              </slot>
            </a-row>
            <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-row>

            <a-row :gutter="2">
              <a-divider dashed />
            </a-row>
          </a-card>
          <!-- 检索列表  start -->
          <a-row v-show="show_sider">
            <a-list :grid="{ gutter: 16 }" :loading="loading_over">
              <a-list-item v-for="(book, index) in books" :key="index">
                <book-list
                  v-on:showbookid="ShowBookId"
                  :book="book"
                >
                </book-list>
              </a-list-item>
            </a-list>
          </a-row>
          <!-- 检索列表  end -->
          <a-row v-show="show_pagination && total_counts > 0 && !showdetail">
            <a-card>
             
              <search-pagination
                facets_lists="facets_lists"
                :sort_fields="sort_fields"
                :page_current="page_current"
                :total_counts="total_counts"
                :page_size_options="page_size_options"
                :page_size_default="page_size_default"
                :page_size="page_size"
              >
              </search-pagination>
            </a-card>
          </a-row>

          <div class="amodal">
            <a-modal
              :footer="null"
              title="图书详情"
              :visible="is_bookinfo_visible"
              width="60%"
              @ok="handleOk"
              @cancel="handleCancel"
            >

              <book-info
                ref="bookinfo_child"
                :title="bookinfo_title"
              >
              </book-info>
            </a-modal>
          </div>
        </a-layout-content>
      </a-layout>
    </a-col>
  </a-row>
</template>

<script>
import BookList from "./common/BookList.vue";
import SiderSearch from "./common/SiderSearch";

import BookInfo from "./common/BookInfo.vue";
import SearchBox from "./common/SearchBox.vue";
import SearchPagination from "./common/SearchPagination.vue";
export default {
  name: "PaperbookSearch",
   components: {
     // VueSlider,
         "book-list": BookList,
    "book-info": BookInfo,
    "sider-search": SiderSearch,
    "search-box": SearchBox,
    "search-pagination": SearchPagination,
  },
  data() {
    return {
      is_show_sider_bar: false,
      is_drawer_visible: false,
      drawer_palcement: "left",
      is_bookinfo_visible: false,
      bookinfo_title: "",
      is_bookinfo_spinning: false,
      is_spinning: false,
      intro: "",
      info: [],

  
      // 详情
      // title: "",
      bookinfo_columns: [],
      bookinfo_data: [],
      deep: true,
    };
  },

  computed: {
     // 判断设备
    GetIspc() {
      return navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
    },
    // 判断是否加载完成
    loading_over() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .loading_over;
    },
    rscontype() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .rscontype;
    },
    // 是否打开详情
    showdetail() {
      return this.$store.state[this.$store.state.Namedparent.name].books.showdetail;
    },
    // 获取slider
    getfilters() {
    //   var facetsList = this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList;
    //   var filters = this.$store.state[this.$store.state.Namedparent.name].books.qs.filters
    //   console.log(this.$store.state[this.$store.state.Namedparent.name].books.rs.facetsList);
    //   var a = [];
    //  facetsList.filter((item)=>{
    //     item.facetList.filter((children)=>{
    //       filters.filter((select)=>{
    //         select.values.filter((selectchildren)=>{
    //           console.log(children.code == selectchildren)
    //           if(children.code == selectchildren){
    //             console.log(children)
    //             a.push(children.name)
    //           }
    //         })
    //       })
    //     })
    //   })
    //   console.log(a)
      // return this.$store.state[this.$store.state.Namedparent.name].books.qs.filters;
      return this.$store.state[this.$store.state.Namedparent.name].books.qs.filters;
    },
    // 获取书籍列表
    books() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs.content;
    },
    // 获取slider
    show_sider() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_sider;
    },
    // 是否展示分页
    show_pagination() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .show_pagination;
    },
    // 获取搜索类型
    sort_fields() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.sortFields;
    },
  // 获取当前页码
    page_current() {
      return this.$store.state.Paperbook.books.qs.pageCount ? this.$store.state.Paperbook.books.qs.pageCount : 1;
    },
    // 获取当前页面条数
    page_size() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .pageSize;
    },
    page_size_options() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.pageSizeOptions;
    },
    page_size_default() {
      return this.$store.state[this.$store.state.Namedparent.name].books
        .fieldsAllow.defaultPageSize;
    },

    page_sort_order() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortType;
    },
    page_order_by() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .sortField;
    },
    // 获取总数
    total_counts() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .total;
    },
    // 获取分页数据
    facets_lists() {
      return this.$store.state[this.$store.state.Namedparent.name].books.rs
        .facetsList;
    },
    // 获取搜索参数
    params_search() {
      return this.$store.state[this.$store.state.Namedparent.name].books.qs;
    },
    search_result: {
      get() {
        var sr = {
          total_counts: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.total_counts,
          page_size: this.$store.state[this.$store.state.Namedparent.name].books
            .rs.pageSize,
          page_current: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.pageCount,
          facets_lists: this.$store.state[this.$store.state.Namedparent.name]
            .books.rs.facetsList,
          books: this.$store.state[this.$store.state.Namedparent.name].books.rs
            .content,
          deep: true,
        };
        return sr;
      },
    },
  },
  // beforeRouteUpdate(to, from, next){
  //   next()
  //   console.log(this.$route)
  //   console.log(this.$route.query.searchtitle)
  //   //this.$route.query.searchtitle
  //     if(this.$route.query.searchtitle){
  //      // this.$refs.child.SearchAction(this.$route.query.searchtitle) 
  //         this.$router.push({
  //           path: "/PaperbookSearch",
  //           query: { searchtitle: this.$route.query.searchtitle },
  //         });
  //          this.$refs.child.SearchAction(this.$route.query.searchtitle) 
  //     }
  // },
  watch: {
    // $route(to,old){
    //   console.log(to,old)
    //   console.log(to.query.searchtitle)
    //   if(to.query.searchtitle){
    //     this.$refs.child.SearchAction(this.$route.query.searchtitle) 
    //   }
    // }
  },
  methods: {
    EmitGetBookInfo(marc_no, title) {
      this.ShowBookId(false, marc_no, title);
      this.$store.commit("Paperbook/BOOKINFO_ALREADY_SHOW", false);
    },
    ShowBookId(is_showing, marc_no, title) {
      this.bookinfo_title = title;
      this.book_already_showing = is_showing;
      this.is_bookinfo_visible = true;
      this.$nextTick(()=>{
        this.$refs.bookinfo_child.GetBookInfo(marc_no);
      })
    },


    //点击ok
    handleOk() {
      this.is_bookinfo_visible = false;
    },
    //点击cancel
    handleCancel() {
      this.is_bookinfo_visible = false;
    },
    showDrawer() {
      this.is_drawer_visible = true;
    },
    onDrawerClose() {
      this.is_drawer_visible = false;
    },
    onBookinfoClose() {
      this.is_bookinfo_visible = false;
    },
    onBookinfoShow() {
      this.is_bookinfo_visible = true;
    },
    onSearchSideCollapse(collapsed, type) {
      console.log(
        "onSearchSideCollapse",
        collapsed,
        type,
        this.is_show_sider_bar
      );
    },

    onSearchSideBreakpoint(broken) {
      this.is_show_sider_bar = !broken;
      if (this.is_show_sider_bar) {
        if (!broken) {
          this.is_drawer_visible = false;
        }
      }
      console.log(
        "onSearchSideBreakpoint broken: ",
        broken,
        " is_show_sider_bar: ",
        this.is_show_sider_bar
      );
    },
    affixChange() {
      this.is_drawer_visible = !this.is_drawer_visible;
    },
    /**
     * 纸书检索
     */
    GetBooksLibsys: function () {
      this.is_init = false;
      this.$store.dispatch("GetBooks");
    },
    handleClose(e, indexs) {
      var fieldclassName = e.fieldName;
      var code = e.values[indexs];
      var do_search_book = false;
      return new Promise(() => {
        this.$store.commit(
          this.$store.state.Namedparent.name + "/SearchSideUpdateFilters",
          {
            fieldName: fieldclassName,
            code:code,
            value: e.name[indexs],
          },
          do_search_book
        );
       });
      //  this.$store.commit(
      //   this.$store.state.Namedparent.name + "/clearsearchwordks",this.$route.query.searchtitle
      // );
      // this.$store.state[this.$store.state.Namedparent.name].books.qs.filters.forEach(item => {
      //     console.log(item)
      //     that.selectvalue.push(item.values[0])
      //   });
    },

    // 纸书详情查看
    GetBookInfo: function (marc_no) {
      // this.$router.push({
      //     name: "BookInfo",
      //     params: { id: marc_no },
      //     // params: { id: JSON.stringify(this.$store.rs) },
      // });

      if (
        !this.$store.state[this.$store.state.Namedparent.name].books.bookinfo_already_show
      ) {
        this.is_bookinfo_visible = true;
        this.$emit("showbookid", true);
        this.$store.commit("Paperbook/BOOKINFO_ALREADY_SHOW", true);
      } else {
        return;
      }

      this.is_bookinfo_spinning = true;
      var that = this;
      this.axios
        .get(
          // "http://opac.niit.edu.cn/vpn/libsys_book2.php", {
          "http://login.epac.user.kim/tools/prinfo.php",
          {
            params: { marc_no: marc_no },
            headers: {
              "Content-Type": "text/plain",
            },
          }
        )
        .then(function (response) {
          // if (response.data.err == true) {

          // }
          var data = response.data;
          var x = data;
          that.info = x.info;
          that.bookinfo_columns = x.header;
          that.bookinfo_data = x.body;
          that.is_bookinfo_spinning = false;
        });
    },
  },
  mounted() {
     if (this.$route.query.searchtitle) {
      this.$refs.child.SearchAction(this.$route.query.searchtitle) 
    }
    // var cmp = this.$route;
    // console.log(cmp);
    // this.$store.commit("Paperbook/UpdateQsSearchKeyWord", this.$route.query.searchtitle);
    // this.$store.dispatch("Paperbook/GetBooks");
  },
};
</script>

<style scoped>
/deep/.amodal .ant-modal {
  width: 50% !important;
}
/deep/.ant-list-grid .ant-col > .ant-list-item {
  margin-top: 20px;
}
/deep/.sliderhead .ant-collapse-header {
  color: #fff !important;
}
</style>